<template>
    <el-input :disabled="disabled"
              v-model="formatterMoney"
              clearable
              :placeholder="placeholder"
              @blur="inputBlur"
              @focus="inputFocus($event)" />
</template>

<script>

    export default {
        name: "moneyInput",
        props: {
            /** 输入状态 */
            disabled: {
                type: Boolean,
                default: false
            },
            /** 传入金额 */
            value: {
                type: [Number, String],
                default: 0
            },
            /** placeholder */
            placeholder: {
                type: String,
                default: '请输入金额'
            },
            /** 是否输入负数 */
            isMinus: {
                type: Boolean,
                default: true
            },
            /** 最大值 */
            max: {
                type: [Number, String],
                default: undefined
            }
        },
        data() {
            return {
                // 显示的千分位金额
                formatterMoney: '0',
            }
        },
        mounted() {
            this.formatterMoney = this.comdify(this.value);
        },

        methods: {
            /** 数字转为千分位字符 */
            comdify(n) {
                n = this.delCommafy(n)
                let re = /\d{1,3}(?=(\d{3})+$)/g;
                let n1 = Number(n).toFixed(2).replace(/^(-?\d+)((\.\d+)?)$/, function (s, s1, s2) {
                    return s1.replace(re, "$&,") + s2;
                });

                if ((n1 === 'NaN')) {
                    n1 = '0.00'
                } else {
                    if (this.isMinus == false && this.delCommafy(n1) < 0) {
                        n1 = '0.00'
                    }
                }
                return n1;
            },
            /** 去除千分位中的‘，’ */
            delCommafy(num) {
                if (!num) return num;
                num = num.toString();
                num = num.replace(/,/gi, '');
                return Number(num);
            },
            /** 聚焦千分位字符转为数字 */
            inputFocus(e) {
                this.formatterMoney = this.delCommafy(this.formatterMoney)
                let a = new Promise((resolve) => {
                    resolve()
                }).then(() => {
                    e.currentTarget.select();
                })
            },
            /** 失去焦点数字转为千分位字符
             *  并把数字类型的emit出去
             * */
            inputBlur() {
                if (this.max && this.max < this.formatterMoney) {
                    this.formatterMoney = this.max;
                }
                this.formatterMoney = this.comdify(this.formatterMoney)
                  let number = this.delCommafy(this.formatterMoney)
                this.$emit('input', number)
            },
        },
        watch: {
            value(newVal) {
                this.formatterMoney = this.comdify(newVal);
            }
        }
    }
</script>

<style scoped lang="scss">
    /deep/ .el-input__inner {
        text-align: right;
    }
</style>
